<script lang="ts" setup>
import {ref} from "vue"
import {ElMessage} from "element-plus"
import {userLogin, userRegister} from "../serve"
import {useRouter} from 'vue-router'

const
    fromRules = {
      username: [
        {
          required: true,
          min: 3,
          max: 10,
          message: '账号长度3-10位',
          trigger: 'trigger',
        },
      ],
      password: [
        {
          required: true,
          min: 3,
          max: 15,
          message: '密码长度3-15位',
          trigger: 'trigger',
        },
      ]
    },
    qrRules = {
      username: [
        {
          required: true,
          min: 3,
          max: 10,
          message: '账号长度3-10位',
          trigger: 'trigger',
        },
      ],
      password: [
        {
          required: true,
          min: 3,
          max: 15,
          message: '密码长度3-15位',
          trigger: 'trigger',
        },
      ],
      confirmPassword: [
        {
          required: true,
          min: 3,
          max: 15,
          message: '密码长度3-15位',
          trigger: 'trigger',
        },
      ]
    },
    fromData = ref({username: '', password: '', confirmPassword: ''}),
    signUp = ref(false),
    froms = ref(),
    router = useRouter(),
    qrF = ref()
;

async function changeLogin() {
  try {
    if (signUp.value) { //注册
      await qrF.value.validate()
      if (fromData.value.password != fromData.value.confirmPassword) {
        ElMessage({message: '密码不一致', type: 'error'})
        return
      }
      userRegister({...{role: 'ADMIN'}, ...fromData.value}).then(() => {
        ElMessage({message: '注册成功！', type: 'success'})
        fromData.value.confirmPassword = ''
      })
    } else { // 登录
      await froms.value.validate()
      userLogin({username: fromData.value['username'], password: fromData.value['password']}).then((r: any) => {
        sessionStorage.setItem('Authorization', r['token'])
        router.push('/rank').catch(() => true)
      })
    }
  } catch (e) {
  }
}

function changeSw() {
  signUp.value = !signUp.value
  fromData.value = {username: '', password: '', confirmPassword: ''}
}
</script>

<template>
  <div layout>
    <el-image src="./login-bg.png" style="height: 100%;width: 100%;z-index: -1;"/>
    <div class="login-container">
      <div style="margin: 0 auto; width: 30px;height: 30px;">
        <el-image src="./Logo.svg"/>
      </div>
      <!-- 主标题 -->
      <h3 class="title">旅游网站后台管理系统</h3>
      <!-- 副标题 -->
      <h5 class="subtitle">欢迎{{ signUp ? '注册' : '登录' }}</h5>
      <!-- 登录表单 -->
      <el-form v-if="!signUp" ref="froms" :model="fromData" :rules="fromRules">
        <!-- 账号输入 -->
        <el-form-item prop="username">
          <label for="account">账号</label>
          <el-input v-model="fromData.username" placeholder="请输入账号"/>
        </el-form-item>
        <!-- 密码输入 -->
        <el-form-item prop="password">
          <label for="account">密码</label>
          <el-input v-model="fromData.password" clearable placeholder="请输入密码" show-password type="password"/>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-button class="login-btn" @click="changeLogin">登录</el-button>
      </el-form>
      <!-- 注册表单 -->
      <el-form v-else ref="qrF" :model="fromData" :rules="qrRules">
        <!-- 账号输入 -->
        <el-form-item prop="username">
          <label for="account">账号</label>
          <el-input v-model="fromData.username" placeholder="请输入账号"/>
        </el-form-item>
        <!-- 密码输入 -->
        <el-form-item prop="password">
          <label for="account">密码</label>
          <el-input v-model="fromData.password" clearable placeholder="请输入密码" show-password type="password"/>
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <label for="account">确认密码</label>
          <el-input v-model="fromData.confirmPassword" clearable placeholder="请输入确认密码" show-password
                    type="password"/>
        </el-form-item>
        <el-button class="login-btn" @click="changeLogin">立即注册</el-button>
      </el-form>
      <!-- 分隔线 -->
      <div class="divider">
        <span class="divider-line"></span>
        <span class="divider-text">OR</span>
        <span class="divider-line"></span>
      </div>
      <!-- 辅助操作 -->
      <button class="link-btn" @click="changeSw">{{ !signUp ? '快速注册' : '快速登录' }}</button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
[layout] {
  user-select: none;
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex;
}

.login-container {
  position: absolute;
  right: 17%;
  top: 10%;
  width: 320px;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.title {
  color: #2d3a4b;
  text-align: center;
  margin-bottom: 8px;
  margin-top: 5px;
}

.subtitle {
  color: #8898aa;
  text-align: center;
  margin-bottom: 32px;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #2d3a4b;
  font-size: 14px;
}

.login-btn, .link-btn {
  width: 100%;
  height: 40px;
  background: #037081;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.login-btn:hover, .link-btn:hover {
  opacity: 0.9;
}

.link-btn {
  background-color: white;
  border: 1px solid #2d3a4b;
  margin-top: 10px;
  color: #2d3a4b;
}

.divider {
  display: flex;
  align-items: center;
  margin: 15px 0 10px 0;

  .divider-line {
    flex: 1;
    height: 1px;
    background: #dcdfe6;
  }

  .divider-text {
    padding: 0 12px;
    color: #8898aa;
    font-size: 12px;
  }
}
</style>